<template>
  <div class="app-container">
    <el-card shadow="never" v-loading="loading">
      <el-row :gutter="5">
        <el-col :span="24" class="main-card-view">
          <el-row>
            <el-card shadow="never">
              <el-row>
                <el-form :model="form" label-width="120px">
                  <el-form-item label="审批流程名称">
                    <el-input v-model="form.approvalFlowName" style="width:40% ;"></el-input>
                  </el-form-item>
                  <el-form-item label="审批级别">
                    <el-select v-model="form.approvalLevel" placeholder="请选择">
                      <el-option v-for="(item) in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="区域" prop="area">
                    <el-cascader ref="area" v-model="area" :options="regionOptions" placeholder="请选择地区"
                      :props="props" @change="areaChange">
                    </el-cascader>
                    <label style="font-size: 16px;color: red;">  根据要创建的审批区域选择地区，例如，省级选择"陕西省"，市级选择"西安市"，区县级选择"雁塔区"</label>
                  </el-form-item>

                  <el-button type="primary" style="margin-left: 120px;" @click="save">保存</el-button>
                  <el-button style="margin-left: 120px;" @click="$router.go(-1)">返回</el-button>
                </el-form>
              </el-row>
            </el-card>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import * as classifyManger from "../../api/classifyManger"
import * as ApprovalConfig from "../../api/expertApprovalConfig"
import * as areaInfo from "../../api/areaInfo"
// import personnel from '../../components/personnel.vue'
export default {
  // components: { personnel },
  data () {
    return {
      form: {
      },
      tableData: [],
      loading: false,
      total: 0,
      regionOptions: [],
      area: '',
      props: {
        children: "childs",
        label: "areaName",
        checkStrictly: true,
        value: "areaName",
        emitPath: true
      },
      options: [
        { label: '一级', value: 1 },
        { label: '二级', value: 2 },
        { label: '三级', value: 3 },
        { label: '四级', value: 4 },
        { label: '五级', value: 5 }],
      dialogVisible: false,
      columnDialog: false,
      treeData: [],
      status: '',
      routerStatus: '',
      dialogTiele: '添加审批内容'
    }
  },
  methods: {
    selectPersonnel () {
      this.dialogVisible = true
    },
    getName (msg) {
      this.form.publisher = msg.userName
      this.dialogVisible = false
    },
    getUid () {
      var uid = '';
      var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      var charCount = chars.length;
      for (var i = 0; i < 32; i++) {
        uid += chars.charAt(Math.floor(Math.random() * charCount));
      }
      return uid;
    },
    save () {
      if (this.routerStatus === 'add') {
        ApprovalConfig.insert(this.form).then(res => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg)
            this.$router.go(-1)
          }
        }).catch(error => {
          console.log(error)
        })
      } else if (this.routerStatus === 'edit') {
        ApprovalConfig.update(this.form).then(res => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg)
            this.$router.go(-1)
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    areaChange (e) {
      this.form.area = e.join('/')
      this.$refs.area.dropDownVisible = false
    },
    getData () {
      areaInfo.queryTree({}).then(result => {
        this.regionOptions = result.data.data;
        this.regionOptions = this.buildTree(this.regionOptions)
      }).catch(error => {
        console.log(error);
      })
    },
    closeTanc (e) {
      this.$refs.cascader.dropDownVisible = false
    }
  },
  mounted () {
    this.getData ()
    this.routerStatus = this.$route.query.status
    if (this.routerStatus === 'add') {
      this.form.uid = this.getUid()
    } else if (this.routerStatus === 'edit') {
      this.form = JSON.parse(sessionStorage.getItem('ApprovalConfig'))
      this.form.approvalLevel = Number(this.form.approvalLevel)
    }

  }
}
</script>

<style scoped lang="scss"></style>
